<template>
  <div class="common-layout">
    <el-container style="height:100%">
      <el-header><manageHead /></el-header>
      <el-container>
        <el-aside width="200px"><manageAside  @update-main="paramUpdateMain"/> </el-aside>
        <el-container>
          <!-- 根据条件动态渲染子组件 -->
            <component :is="selectedComponent"></component>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import manageHead from "./children/manageHead.vue";
import manageAside from "./children/manageAside.vue";
import deliveryAppointment from "./children/deliveryAppointment/deliveryAppointmentContain.vue";
import manageWelcome from "./manageWelcome.vue";
import { ref } from 'vue';
const selectedComponent = ref(manageWelcome);
const paramUpdateMain=(val:string)=>{
    console.log(val)
    selectedComponent.value = deliveryAppointment;
}
</script>
<style scoped>
.common-layout{
  width: 100%;
  height: 100%;
}
</style>
